{include file="header/index" /}
<div class="container bgwhite">
	<div class="mt20">
		<div class="col-xs-12">
			<form class="clearfix" enctype="multipart/form-data">
				<p class="fl engineer_search"><input type="text" value="" id="engineers_number" name="engineers_number" placeholder="请输入员工编号" /></p>
				<p class="fl engineer_search"><input type="text" value="" id="engineers_name" name="engineers_name" placeholder="请输用户名"></p>
				<p class="fl engineer_search"><input type="text" value="" id="engineers_phone" name="engineers_phone" placeholder="请输手机号"></p>
				<p class="fl engineer_idNum"><input type="text" value="" id="engineers_idcard" name="engineers_idcard" placeholder="请输入身份证号码" /></p>
				<p class="fl engineer_search clearfix">
					<label class="fl">账户状态</label>
					<select id="engineers_status" class="fl">
						<option value="">请选择</option>
						<option value="2">正常</option>
						<option value="1">冻结</option>
					</select>
				</p>
				<p class="fl"><button type="button" id="search" class="engineer_search_btn">搜索</button></p>
				<button type="button" class="btn btn-primary fr add_newuser input-Btn">
					<a href="{:url('add')}">
						<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增工程人员
					</a>
				</button>

			</form>

			<table class="table table-bordered engineer_table mt20">
				<thead>
					<tr>
						<th>头像</th>
						<th>员工编号</th>
						<th>姓名</th>
						<th>电话</th>
						<th>身份证号</th>
						<th>员工地址</th>
						<th>完成工单数</th>
						<th>完成设备数</th>
						<th>待完成工单</th>
						<th>账户状态</th>
						<th>操作</th>
					</tr>
				</thead>

				<!--字符串拼接-->
				<tbody id="list">
					{volist name="data" id="k"}
					<tr>
						<td><img class="imgWh" src="{:Config('IMAGES_PATH')}{$k.avatar_img}"></td>
						<td>{$k.engineers_number}</td>
						<td>{$k.engineers_name}</td>
						<td>{$k.engineers_phone}</td>
						<td>{$k.engineers_idcard}</td>
						<td>{$k.engineers_address}</td>
						<td class="bluecolor" onclick="jed({$order_id},{$k.engineers_number},3,13)">{$k.completed}单</td>
						<td>{$k.equipmentsSum ? $k.equipmentsSum : ''}</td>
						<td class="bluecolor" onclick="jed({$order_id},{$k.engineers_number},3,8)">{$k.uncompleted}单</td>
						<td>{$k.engineers_status}</td>
						<td>
							<a href="{:url('look',['id' => $k.engineers_id])}" class="col-127 fs14">查看</a>
							<a href="{:url('edit',['id' => $k.engineers_id])}" class="col-127 fs14">修改</a>&nbsp;&nbsp;
							<a href="#" onclick="del({$k.engineers_id})">删除</a>
						</td>
					</tr>
					{/volist}
				</tbody>

			</table>
		</div>
	</div>

	<!--分页显示-->
	<div class="clearfix" style="float:right;margin: 0 auto;">
		<span class="fl mr20 mt5">共<b id="total">{$count}</b>条数据</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
	</div>
	<!-- 加载动画 -->
	<div class="spiner-example">
		<div class="sk-spinner sk-spinner-three-bounce">
			<div class="sk-bounce1"></div>
			<div class="sk-bounce2"></div>
			<div class="sk-bounce3"></div>
		</div>
	</div>

</div>
</body>

<script>
	//删除工程人员
	function del(id) {
		$.getJSON("{:url('engineer/del')}", {
			id: id
		}, function(data) {
			if(data.status == 1) {
				top.layer.msg(data.message, {
					icon: 1,
					time: 2000
				}, function() {
					Ajaxpage();
				})
			} else {
				top.layer.msg(data.message, {
					icon: 2,
					time: 2000
				}, function() {
					Ajaxpage();
				})
			}
		});
	}

	// 模糊搜索点击
	$("#search").click(function() {

		// 调用分页
		Ajaxpage();
	});

	//laypage分页
	Ajaxpage();
	// curr 获取当前页面数
	function Ajaxpage(curr) {

		// 获取模糊搜索的数据
		var engineers_number = $("#engineers_number").val();
		var engineers_name = $("#engineers_name").val();
		var engineers_phone = $("#engineers_phone").val();
		var engineers_idcard = $("#engineers_idcard").val();
		var engineers_status = $("#engineers_status").val();
		//
		var key = $('#key').val();

		// 发送ajax请求
		$.getJSON('{:url("engineer/index")}', {
			page: curr || 1,
			key: key,
			engineers_number: engineers_number,
			engineers_name: engineers_name,
			engineers_phone: engineers_phone,
			engineers_idcard: engineers_idcard,
			engineers_status: engineers_status
		}, function(data) {
			//			                                    console.log(data);
			$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
			if(data == '') {

				// 替换总的数据
				document.getElementById('total').innerText = 0;

				$("#list").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');

				// 更新分页
				laypage({
					cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
					pages: 0, //总页数
					skip: true, //是否开启跳页
					skin: '#337ab7', //分页组件颜色
					curr: 0,
					first: '首页', //若不显示，设置false即可
					last: '尾页', //若不显示，设置false即可
					groups: 3, //连续显示分页数
					jump: function(obj, first) {
						if(!first) {
							Ajaxpage(obj.curr)
						}
						$('#allpage').html('第'+ 0 +'页，共'+ '<i>'+obj.pages+'</i>' +'页');
						inputlength();
					}
				});
			} else {

				// 替换总的数据
				document.getElementById('total').innerText = data[0].count;

				// 清空数据
				$("#list").html('');
				// 将数据循环，拼接
				var str = '';
				$.each(data, function(k, v) {
					var order_id = "{$order_id}";
					str += '<tr>';
					str += '<td>' + '<img class="imgWh" src="{:Config(\'IMAGES_PATH\')}' + v.avatar_img + '"></td>';
					str += '<td>' + v.engineers_number + '</td>';
					str += '<td>' + v.engineers_name + '</td>';
					str += '<td>' + v.engineers_phone + '</td>';
					str += '<td>' + v.engineers_idcard + '</td>';
					str += '<td>' + v.engineers_address + '</td>';
					str += "<td class='bluecolor' onclick='jed(" + order_id + "," + v.engineers_number + ",3,13)'>" + v.completed + "单</td>";
                    str += '<td>' + v.equipmentsSum + '</td>';
					str += "<td class='bluecolor' onclick='jed(" + order_id + "," + v.engineers_number + ",3,8)'>" + v.uncompleted + '单</td>';
					str += '<td>' + v.engineers_status + '</td>';
					str += '<td>';
					str += '<a href="look/id/' + v.engineers_id + '"  class="col-127 fs14">查看</a>&nbsp;';
					str += '<a href="edit/id/' + v.engineers_id + '"  class="col-127 fs14">修改</a>&nbsp;&nbsp;';
					str += '<a href="#" onclick="del(' + v.engineers_id + ')">删除</a>';
					str += '</td>';
					str += '</tr>';
				});
				// 将拼接的数据输出在页面
				$("#list").html(str);

				laypage({
					cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
					pages: data[0].allPage, //总页数
					skip: true, //是否开启跳页
					skin: '#337ab7', //分页组件颜色
					curr: curr || 1,
					first: '首页', //若不显示，设置false即可
					last: '尾页', //若不显示，设置false即可
					groups: 3, //连续显示分页数
					jump: function(obj, first) {
						if(!first) {
							Ajaxpage(obj.curr)
						}
						$('#allpage').html('第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
						inputlength();
					}
				});
			}
		});
	}
</script>

</html>